<template>
	<view class="page">
		<!-- <scroll-view scroll-y="" class="file-list" :style="{'height': screenHeight-80 +'px'}"> -->
			<uni-group title="视频文件">
				<view class="video-block" v-for="(item,index) in videoList" :key = "index" >
					<video class="video-item" :src="item.filePath" @click="openVideo(item)"></video>
					<button type="warn" class="delt-video" size="mini" @click="videoRemove(item)">删除</button>
				</view>
				
				<view class="" v-if="videoList.length == 0">
					无
				</view>
			</uni-group>
			<uni-group title="图片文件">
				<view class="file-block" @longpress ="select(item,index)" v-for="(item,index) in imageList" :key = index @click="notSelect(item,index)">
					<image class="img-item" :src="item.filePath" mode="scaleToFill"></image>
					<text v-if="item.isSelect" class="iconfont iconxuanzhong"></text>
					<text v-if="isReady" class="iconfont iconweixuanzhong-01"></text>
				</view>
				<view class="" v-if="imageList.length == 0">
					无
				</view>
			</uni-group>
			<uni-group title="音频文件">
				<view class="music-block" v-for="(item,index) in musicList" :key = "index">
					<audio controls :name="item.filePath.split('/').pop()" :src="item.filePath" ></audio>
					<text class="iconfont iconziyuan1" @click="videoRemove(item)"></text>
				</view>
				<view class="" v-if="musicList.length == 0">
					无
				</view>
			</uni-group>
			<uni-group title="其他文件">
				<view class="other-block"  v-for="(item,index) in otherList" :key = "index" >
					<text @click="openFile(item)">{{item.name}}</text><text <text @click="otherRemove(item)" class="iconfont iconziyuan1"></text>
				</view>
				<view class="" v-if="otherList.length == 0">
					无
				</view>
			</uni-group>
		<!-- </scroll-view> -->
		<button type="warn" class="delet-btn" v-if="deltList.length >0" @click="imageRemove">删除{{deltList.length}}项</button>
	</view>
</template>

<script>
	
	var _self
	
	export default {
		data() {
			return {
				screenHeight: uni.getSystemInfoSync().screenHeight,
				isReady: false,
				imageList: [],
				videoList: [],
				otherList: [],
				musicList: [],
				deltList: []
			}
		},
		onLoad() {
			_self = this
			this.init()
		},
		onShow() {
			
		},
		methods: {
			init(){
				this.imageList = []
				this.videoList = []
				this.otherList = []
				uni.getSavedFileList({
				  success: function (res) {
				    // console.log(res.fileList.length);
					if(res.fileList != null && res.fileList.length != 0){
						res.fileList.forEach(fl =>{
							if(_self.utils.imgsuffixList.indexOf(fl.filePath.split('.').pop()) != -1){
								fl.isSelect = false
								_self.imageList.push(fl)
							}else if(_self.utils.videosuffixList.indexOf(fl.filePath.split('.').pop()) != -1){
								// fl.filePath = "file:/"+plus.io.convertLocalFileSystemURL( fl.filePath )
								_self.videoList.push(fl)
							}else if(_self.utils.musicsuffixList.indexOf(fl.filePath.split('.').pop()) != -1){
								// fl.filePath = "file:/"+plus.io.convertLocalFileSystemURL( fl.filePath )
								console.log(fl)
								_self.musicList.push(fl)
							}else{
								var sps = plus.io.convertLocalFileSystemURL( fl.filePath ).split('/')
								fl.name = sps.pop()
								_self.otherList.push(fl)
							}
						})
						// console.log("imageList",_self.imageList.length)
						// console.log("videoList",_self.videoList.length)
						// console.log("musicList",_self.musicList.length)
						// console.log("otherList",_self.otherList.length)
					}
				  }
				});
				_self.deltList = []
				_self.isReady = false
			},
			select(item,index){
				_self.isReady = true
				item.isSelect = true
				_self.deltList.push(item)
				_self.imageList.splice(index,1,item)
				console.log(_self.deltList.length)
			},
			openFile(file){
				uni.openDocument({
				  filePath: file.filePath,
				  success: function (res) {
					console.log('打开文档成功');
				  }
				});
			},
			notSelect(item,index){
				if(_self.isReady){
					item.isSelect = !item.isSelect
					if(item.isSelect){
						_self.deltList.push(item)
						_self.imageList.splice(index,1,item)
					}else{
						_self.deltList.splice(_self.deltList.indexOf(item),1)
						_self.imageList.splice(index,1,item)
						if(_self.deltList.length == 0){
							_self.isReady = false
						}
					}
				}else{
					// console.log("进来了"+_self.isReady)
					_self.priview(item)
				}
				
			},
			openVideo(file){
				uni.openDocument({
					filePath: file.filePath,
				})
			}, 
			imageRemove(){
				_self.deltList.forEach(dl => {
					uni.removeSavedFile({
						filePath: dl.filePath,
						complete: function (res) {
						  // console.log(res);
						  _self.deltList.splice(_self.deltList.indexOf(dl))
						  _self.imageList.splice(_self.imageList.indexOf(dl))
						}
					 });
				})
				uni.showToast({
					icon:"none",
					title:"删除成功"
				})
				// _self.init()
			},
			videoRemove(file){
				uni.removeSavedFile({
					filePath: file.filePath,
					complete: function (res) {
						_self.videoList.splice(_self.videoList.indexOf(file),1)
						uni.showToast({
							icon:"none",
							title:"删除成功"
						})
					  // console.log(res);
					}
				 });
				 
			},
			otherRemove(file){
				uni.removeSavedFile({
					filePath: file.filePath,
					complete: function (res) {
						_self.otherList.splice(_self.otherList.indexOf(file),1)
						uni.showToast({
							icon:"none",
							title:"删除成功"
						})
					  // console.log(res);
					}
				 });
				 
			},
			priview(item){
				// 预览图片
				var fl = []
				fl.push(item.filePath)
				uni.previewImage({
					urls: fl,
				});
			}
		}
	}
</script>

<style>
	@import url("history.css");
</style>
